<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			body{
				background-color: #F8F8F8;
			}
			.mui-content{
				background-color: #F8F8F8;
			}
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 22%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
				margin-top: 1px;
			}
			.mui-bar-nav{
				background: #FE635F;
			}
			a{
			color:rgba(255,255,255,1);
			}
			.mui-title{
				color: rgba(255,255,255,1);
			}
			.mui-input-group{
				margin-top: 44px!important;
			}
			.mui-input-group:before{
				height: 0px;
			}
			.mui-input-group:after{
				height: 0px;
			}
			.mui-input-row{
				height: 54px!important;
			}
			.mui-input-group label{
				width: 30%;
				font-size: 15px;
				padding: 18px  15px;
			}
			.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
				width: 70%;
				font-size: 15px;
				padding: 23px  15px;
			}
			
			.mui-input-group .mui-input-row:after{
				right: 15px;
			}
			
			.mui-input-group .mui-input-row:last-child:after{
				height: 0px;
			}
			
			.fasong{  
				position: absolute;	
				right: 15px;
				top: 10px;
			 padding: 8px  12px;
			  background:linear-gradient(76deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
              border-radius:10px;
			  font-size: 15px;
			 color:rgba(255,255,255,1);
			}
			.yanzheng{
				 position: absolute;
				 width: 20px;
				 right: 130px;
				 top: 15px;
				 font-size: 15px;
			}
			#sendMail{
				border: none;
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
				box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
				border-radius:43px;
				margin-top: 50px;
				float: left;
			}
			.touxiang{
				width: 100%;
				position: relative;
				float: left;
				background-color: #FFFFFF;
				padding-bottom: 20px;
			}
			.touxiang>label{
				width: 25%;
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
				position: relative;
				float: left
			}
			.touxiang>img{
				width: 107px;
				height: 107px;
				float: left;
				margin-top: 20px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">修改资料</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>用户昵称</label>
					<input id='name' type="text" class="mui-input-clear mui-input"  placeholder="请输入昵称" value="">
				</div>             	
               	<!-- <div class="mui-input-row">
               	<label>手机号码</label>
               	<input id='email' type="email" class="mui-input-clear mui-input" value="请输入电话AA">
               </div> -->
			   <div id="shangjai">
				   <div class="mui-input-row">
				   		<label>商家昵称</label>
				   		<input id='shangjianame' type="text" class="mui-input-clear mui-input" placeholder="请输入商家昵称" value="">
				   	</div>             	
				   	<div class="mui-input-row">
				   	<label>商家号码</label>
				   	<input id='shangjiaphone' type="text" class="mui-input-clear mui-input" placeholder="请输入电话" value="">
				   </div>
				   <div class="mui-input-row">
				   		<label>收货地址</label>
				   		<input id='shangjiaaddress' type="text"  class="mui-input-clear mui-input" placeholder="哪个市,哪个区,哪一栋" value="">
				   	</div>  
			   </div>
			              	
				<!-- <div class="mui-input-row">
					<label>验证码</label>
					<input id='email' type="email" class="mui-input-clear mui-input" placeholder="验证码">
					<span class="yanzheng">(60)</span>
					<span  class="fasong">发送验证码</span>
				</div> -->
				<div class="touxiang">
					<label for="">用户头像</label>
					<img id="touxiangs" src="./image/shangchuanddd.png" alt="">
					<input type="hidden" id="touxiang" value=""/>
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='sendMail' class="mui-btn mui-btn-block mui-btn-primary">提交</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="maowenke/MaoWenKe.js"></script>
		<script src="js/app.js"></script>
		<script>
			mui.plusReady(function(){
				var url = plus.storage.getItem('url');
				var user = plus.storage.getItem('user');
				user  = JSON.parse(user);
				mui.init({
					beforeback: function() {　　　　
					var list = plus.webview.currentWebview().opener();　　　　
						  //refresh是A页面自定义事件
					mui.fire(list, 'refresh');
						 //返回true,继续页面关闭逻辑
					return true;
					},
				});
				mui.post(url+'/juyou/myinfo/getmyinfo',{token:user.token},function(res){
					if(res.code==200){
						$("#name").val(res.data.user.name);
						if(res.data.shanghu){
							$("#shangjianame").val(res.data.shanghu.name);
							$("#shangjiaphone").val(res.data.shanghu.phone);
							$("#shangjiaaddress").val(res.data.shanghu.address);
						}else{
							$("#shangjai").hide();
						}
						// $("#shangjia").hide();
						$("#touxiangs").attr('src',res.data.user.fengmian);
						$("#touxiang").val(res.data.user.touxiang);
					}else{
						mui.toast(res.msg);
					}
				})
				
				mui(document).on('tap','#touxiangs',function(){
					plus.nativeUI.showWaiting();
					getImgUrl(url+'/juyou/index/upimgs',function(data){
						plus.nativeUI.closeWaiting();
						$("#touxiangs").attr('src',data.path);
						$("#touxiang").val(data.id);
					})
				})
				mui(document).on('tap','#sendMail',function(){
					$("input").blur();
					var name = $("#name").val();
					var shangjianame = $("#shangjianame").val();
					var shangjiaphone = $("#shangjiaphone").val();
					var shangjiaaddress = $("#shangjiaaddress").val();
					var touxiang = $("#touxiang").val();
					mui.post(url+'/juyou/myinfo/changeuserinfo',{token:user.token,name:name,touxiang:touxiang,shangjianame:shangjianame,shangjiaphone:shangjiaphone,shangjiaaddress:shangjiaaddress},function(res){
						if(res.code==200){
							mui.toast('修改成功');
							setTimeout(function(){
								
								mui.back();
							},1000)
						}else{
							mui.toast(res.msg);
						}
					})
				})
				
			})
			
		</script>
	</body>

</html>